<template>
  <l-layout class="l-tab-page" :left="300">
    <template #left>
      <l-panel :title="$t('公司信息')" style="padding-right:0;">
        <el-tree
          :data="companyTree"
          default-expand-all
          :expand-on-click-node="false"
          @node-click="handleCompanyClick"
        >
          <span class="lr-tree-node" slot-scope="{ node }">
            <i class="fa fa-sitemap"></i>
            {{ $t(node.label) }}
          </span>
        </el-tree>
      </l-panel>
    </template>
    <l-select-panel
      style="padding:8px;padding-left:0;"
      ref="selectPanel"
      :selectedData.sync="selectedData"
      v-model="value"
      :columns="columns"
      :isTree="true"
      :isPage="false"
      :loadSelectTable="loadSelectTable"
      model="client"
      idKey="f_DepartmentId"
      pidKey="f_ParentId"
      valueKey="f_DepartmentId"
      labelKey="f_FullName"
      @change="handleChange"
    >
    </l-select-panel>
  </l-layout>
</template>

<script>
export default {
  props: {
    type: Number,
    departments:{
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      value: "",
      companyId: "",
      columns: [
        { label: "名称", prop: "f_FullName", minWidth: "150" },
        { label: "公司", prop: "f_CompanyId", minWidth: "150",dataType:'company' },
        { label: "编码", prop: "f_EnCode", width: "100" },
        { label: "性质", prop: "f_Nature", width: "80", align: "center" },
      ],
      selectedData: [],

      selectList: {},
      list: [],
    };
  },
  computed: {
    companyTree() {
      if (this.lr_companyTree) {
        return this.lr_companyTree;
      } else {
        return [];
      }
    },
  },
  methods: {
    initForm(){
      this.tableLoadData();
    },
    handleCompanyClick(node) {
      this.$refs.selectPanel.filter({f_CompanyId:node.f_CompanyId});
    },
    tableLoadData() {
      this.$refs.selectPanel.init();
    },
    loadSelectTable() {
      this.list = this.$deepClone(this.departments);
      return this.list;
    },

    handleChange(vlist) {
      const map = {};
      vlist.forEach((t) => {
        map[t] = true;
      });

      const addVList = vlist.filter((t) => !this.selectList[t]);
      const addList = [];
      this.list.forEach((t) => {
        if (addVList.indexOf(t.f_DepartmentId) > -1) {
          addList.push({
            f_UserId: t.f_DepartmentId,
            f_Type: this.type,
            f_Name: t.f_FullName,
            f_Category: 1,
          });
        }
      });
      this.selectList = map;
      this.$emit("change", { values: vlist, addList, type: this.type });
    },

    setForm(value) {
      this.value = String(value);

      const map = {};
      value.forEach((t) => {
        map[t] = true;
      });
      this.selectList = map;

      this.tableLoadData();
    },

    resetForm() {
      this.clear();
    },
    clear() {
      this.$refs.selectPanel.handleClear();
    },
    delete(id) {
      this.$refs.selectPanel.toggleRowSelection([id], false);
    },
  },
};
</script>
